<template>
  <view>
    <view class="w100  pl-30 pr-30">
      <!-- 搜索部分 -->
      <view class="w100 bgff mt-10 mb-10 pl-20 pr-20 pt-10 pb-10 br-20">
        <view class="rowsb rowsm mb-20 mt-20">
          <!-- <view class="title" style="width:20%;">实践课程：</view> -->
          <!-- <scroll-view scroll-x="true" style="white-space: nowrap;"> -->
            <view class="rows rowsm h100" style="flex-wrap: wrap;">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20 mt-10 mb-10" style="" v-for="(item, index) in practiceType"
                :key="index"
                :style="active == practiceType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelTab(index)">{{ item.name }}</view>
            </view>
          <!-- </scroll-view> -->
        </view>
        <view class="rows rowsm mb-20">
          <!-- <view class="title">报告状态：</view> -->
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style=""
                v-for="(item, index) in completionStatus" :key="index"
                :style="active3 == completionStatus[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelCompletion(index)">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rowsb rowsm mb-20 mt-20">
          <view class="title" style="width:20%;">实践任务：</view>
          <uni-data-select v-model="practiceTaskId" :localdata="selectorList"></uni-data-select>
        </view>
        <view class="rows rowsm mb-20">
          <view class="title" style="width:20%;">报告时间：</view>
          <uni-datetime-picker v-model="allTime" type="daterange" @change="changeTime" start-placeholder="起始日期"
            end-placeholder="截至日期" />
        </view>
        <view class="rows rowsm" style="justify-content: space-between;">
          <view v-if="active3 != 1 && active3 != 2"
            :style="{ 'visibility': (active3 == 0 || active3 == 4) && rejectNumber > 0 ? 'visible' : 'hidden' }">
            已驳回: {{ rejectNumber }} 条
          </view>
          <view v-if="active3 == 0 || active3 == 3"> 获得积分: {{ allScore }} 分 </view>
        </view>
      </view>
      <!-- 内容区域列表 -->
      <view class="content-warp">
        <view class="item-warp" v-for="item in itemList" :key="item.id">
          <view class="txt-warp">
            <view class="title">
              <uni-tooltip :content="item.projectName" placement="top" v-if="item.projectName.length > 10">
                {{ item.projectName.slice(0, 10) + '...' }}
              </uni-tooltip>
              <text v-else> {{ item.projectName }}</text>
            </view>
            <!-- <text class="title">{{ item.projectName.length>10? (item.projectName.slice(0, 10) + '...') : item.projectName }}</text> -->
            <view @click="goPage(item)" class="btn" v-if="item.status != 2">{{ item.status == 1 ? '未审核' : item.status == 4
              ? '已驳回' : '' }}</view>
            <view @click="goPage(item)" class="btn" v-else>获得{{ item.acquisitionPoints }}积分</view>
          </view>
          <view class="rows rowsm rowsb fs-28 mb-10 mt-10" @click="goPage(item)">
            <view>
              <text class="fw-600 pr-10"> 任务名称: </text>
              <text> {{ item.taskName }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb fs-28 mb-10 mt-10" @click="goPage(item)">
            <view>
              <text class="fw-600 pr-10"> 实践课程: </text>
              <text>
                <!-- {{ item.taskType == 1 ? '劳动教育' : item.taskType == 2 ? '职业素养' : item.taskType == 3 ?
                '应急安全' : item.taskType == 4 ? '思政实践' : '创新创业' }} -->
                {{ (practiceType.find(v => v.value == item.taskType) || {}).name }}
              </text>
            </view>
            <view>
              <text class="fw-600 pr-10"> 实践地点: </text>
              <text>{{ item.practicePlace.length > 8 ? (item.practicePlace.slice(0, 8) + '...') : item.practicePlace
              }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb fs-28 mb-10 mt-10">
            <view>
              <text class="fw-600 pr-10"> 提交时间: </text>
              <text>{{ item.createTime.slice(0, 16) }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="itemList.length == 0" class="zanwu">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 0,
      active2: 0,
      active3: 0,
      title: '',
      practiceType: [
        { name: '全部', value: 0 },
        // { name: '劳动教育', value: 1 },
        // { name: '职业素养', value: 2 },
        // { name: '应急安全', value: 3 },
        // { name: '思政实践', value: 4 },
        // { name: '创新创业', value: 5 }
      ],
      completionStatus: [
        { name: '全部', value: 0 },
        { name: '未审核', value: 1 },
        { name: '审核通过', value: 2 },
        { name: '已驳回', value: 4 },
      ],
      itemList: [],
      allScore: 0,
      rejectNumber: 0,
      allTime: '',
      selectorList: [],
      practiceTaskId: ''
    };
  },
  watch: {
    practiceTaskId(newId) {
      this.getList();
    },
  },
  onShow(e) {
    this.getTypeCongfigList();
    this.getList();
    this.getSelectorListTaks();
  },
  methods: {
    getTypeCongfigList() {
      this.$tools.axiosFromToken('GET', 'project/practice/type/config/listAll', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.practiceType = [
          { name: '全部', value: 0 }
        ];
        res.rows.forEach(item => {
          this.practiceType.push({ name: item.name, value: item.id })
        })
      })
    },
    getList() {
      const data = {
        taskType: this.active === 0 ? null : this.active,
        status: this.active3 === 0 ? null : this.active3,
        startTime: this.allTime && this.allTime.length > 0 ? (this.allTime[0] + " 00:00:00") : null,
        endTime: this.allTime && this.allTime.length > 0 ? (this.allTime[1] + " 23:59:59") : null,
        practiceTaskId: this.practiceTaskId
      };
      this.$tools.axiosFromToken('GET', `practice/user/listByUser`, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.itemList = res.data.list;
        this.allScore = res.data.score;
        this.rejectNumber = res.data.rejectNumber;
      })
    },
    getSelectorListTaks() {
      this.$tools.axiosFromToken('GET', 'practice/user/selectorForListByUser', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.selectorList= [];
        res.rows.forEach(item => {
          this.selectorList.push({ text: item.taskName, value: item.practiceTaskId })
        })
      })
    },
    handelTab(index) {
      this.active = this.practiceType[index].value
      this.getList()
    },
    handelCompletion(index) {
      this.active3 = this.completionStatus[index].value
      this.getList()
    },

    changeTime(time) {
      this.allTime = time;
      this.getList(this.allTime);
    },
    goPage(item) {
      // if (item.status != 4) {
      // this.$tools.goNext(`/pagesCopy/submitWork/weekWorkDetail?title=${item.taskType == 1 ? '劳动教育' : item.taskType == 2 ? '职业素养' : item.taskType == 3 ? '应急安全' : item.taskType == 4 ? '思政实践' : '创新创业'}&id=${item.id}`)
      this.$tools.goNext(`/pagesCopy/submitWork/weekWorkDetail?title=${(this.practiceType.find(v => v.value == item.taskType) || {}).name}&id=${item.id}`)
      //    } else {
      // this.$tools.goNext(`/pagesCopy/submitWork/weekWork?title=${item.taskType == 1? '劳动教育' :item.taskType == 2? '职业素养' :item.taskType == 3? '应急安全' :item.taskType == 4? '思政实践' :'创新创业'}&id=${item.id}&taskName=${item.taskName}`) 
      // }
      // this.$tools.goNext(`/teacher/practiceTask/practiceDetail?title=${item.type}&id=${item.id}&student='学生'`)

    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;
  padding-bottom: 20px;

  ::v-deep .uni-select__input-box {
    min-height: 32px !important;
  }

  ::v-deep .uni-date__x-input {
    height: auto !important;
    padding: 5px !important;
  }

  ::v-deep .uni-date {
    .uni-date__icon-clear {
      top: -4px;
    }
  }
}

::v-deep .uni-card {
  margin-left: 5px !important;
  margin-right: 2px !important;
}

::v-deep .uni-card__header-content-title {
  font-weight: 600;
  color: #000 !important;
}

::v-deep .uni-card__header-extra-text {

  font-size: 26rpx;
  border: 1px solid #5ac725;
  padding: 5px 10px;
  border-radius: 20px;
  color: #5ac725 !important;
  background: #fff;
}

.mark {
  text-align: right;
  color: #f92929;
}

.title {
  color: #333;
  font-size: 28rpx;
  font-weight: 700;
  // width: 300rpx;
  white-space: nowrap;
}

.title2 {
  color: #333;
  font-size: 28rpx;
  width: 120rpx;
}

::v-deep .uni-stat__select {
  // flex: 1;
  width: 80%;
  padding: 0 !important;

  view {
    width: 100%;
  }
}

.btnWarp {
  width: 140px;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .u-button.data-v-2bf0e569 {
    height: 30px !important;
    margin-left: 10px;
  }

}

.content-warp {
  color: #333;
  font-size: 24rpx;

  .item-warp {
    padding: 24rpx;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30rpx;

    .requirement {
      width: 60%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .btn {
      font-size: 26rpx;
      border: 1px solid #5ac725;
      padding: 5px 10px;
      border-radius: 20px;
      color: #5ac725;
      background: #fff;
    }
  }

  .txt-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.points {
  text-align: right;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.zanwu {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
  font-size: 42rpx;
}
</style>
